<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cencat SaaS - AI智能客服</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            success: '#52C41A',
            warning: '#FAAD14',
            danger: '#FF4D4F',
            info: '#40A9FF',
            dark: '#1D2129',
            'dark-2': '#4E5969',
            'light-1': '#F2F3F5',
            'light-2': '#E5E6EB',
            'light-3': '#C9CDD4'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 2px 14px 0 rgba(0, 0, 0, 0.06)',
            'card-hover': '0 6px 20px 0 rgba(0, 0, 0, 0.1)',
            'dropdown': '0 4px 16px rgba(0, 0, 0, 0.12)',
            'modal': '0 10px 30px -5px rgba(0, 0, 0, 0.1)',
          }
        },
      }
    }
  </script>
  
  <style>
    body { font-family: 'Inter', system-ui, sans-serif; overflow-x: hidden; }
    html { scroll-behavior: smooth; }
    .progress-bar { transition: width 1s ease-in-out; }
    .table-row-hover { transition: background-color 0.2s ease; }
    .table-row-hover:hover { background-color: rgba(242, 243, 245, 0.5); }
    
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slideIn { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .animate-fade-in { animation: fadeIn 0.3s ease-in-out; }
    .animate-slide-in { animation: slideIn 0.3s ease-out; }
    
    .chat-bubble { max-width: 70%; margin-bottom: 1rem; }
    .chat-bubble.user { margin-left: auto; }
    .chat-bubble.ai { margin-right: auto; }
  </style>
</head>

<body class="bg-light-1 text-dark overflow-x-hidden">
  <div class="flex h-screen">
    <!-- 侧边栏导航 -->
    <aside id="sidebar" class="w-64 bg-white h-full shadow-md fixed left-0 top-0 z-30 transition-all duration-300 transform md:translate-x-0 -translate-x-full">
      <div class="p-4 border-b border-light-2 flex items-center space-x-3">
        <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
          <i class="fa fa-cubes text-white text-xl"></i>
        </div>
        <div>
          <h1 class="text-lg font-bold text-primary">Cencat SaaS</h1>
          <p class="text-xs text-dark-2">多租户管理平台</p>
        </div>
        <button id="close-sidebar" class="ml-auto md:hidden text-dark-2 hover:text-primary">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <div class="p-4 border-b border-light-2">
        <div class="flex items-center space-x-3">
          <div class="w-10 h-10 bg-light-1 rounded-full overflow-hidden">
            <img src="https://picsum.photos/id/1005/200/200" alt="当前租户Logo" class="w-full h-full object-cover">
          </div>
          <div>
            <p class="font-medium text-sm">云帆科技有限公司</p>
            <p class="text-xs text-dark-2">企业版 | ID: T2025001</p>
          </div>
        </div>
        <button id="switch-tenant-btn" class="mt-3 w-full text-xs text-primary hover:text-primary/80 flex items-center justify-center space-x-1 transition-all duration-300">
          <i class="fa fa-exchange"></i>
          <span>切换租户</span>
        </button>
      </div>
      
      <nav class="p-3">
        <ul class="space-y-1">
          <li class="text-xs font-semibold text-dark-2 uppercase tracking-wider px-3 py-2">主导航</li>
          
          <li>
            <a href="dashboard.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-dashboard w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>仪表盘</span>
            </a>
          </li>
          
          <li>
            <a href="tenants.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-building-o w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>租户管理</span>
            </a>
          </li>
          
          <li class="text-xs font-semibold text-dark-2 uppercase tracking-wider px-3 py-2 mt-4">AI赋能功能</li>
          
          <li>
            <a href="ai-code-generator.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-code w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>AI代码生成</span>
            </a>
          </li>
          
          <li>
            <a href="ai-log-diagnosis.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-bug w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>日志智能诊断</span>
            </a>
          </li>
          
          <li>
            <a href="ai-customer-service.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg bg-primary/10 text-primary group transition-all duration-300">
              <i class="fa fa-comments-o w-5 h-5 mr-3"></i>
              <span>智能客服</span>
            </a>
          </li>
          
          <li>
            <a href="low-code-platform.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-puzzle-piece w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>低代码平台</span>
            </a>
          </li>
          
          <li class="text-xs font-semibold text-dark-2 uppercase tracking-wider px-3 py-2 mt-4">系统管理</li>
          
          <li>
            <a href="configurations.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-key w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>配置管理</span>
            </a>
          </li>
          
          <li class="text-xs font-semibold text-dark-2 uppercase tracking-wider px-3 py-2 mt-4">系统设置</li>
          
          <li>
            <a href="packages.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-tags w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>套餐管理</span>
            </a>
          </li>
          
          <li>
            <a href="security.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-shield w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>安全设置</span>
            </a>
          </li>
          
          <li>
            <a href="logs.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-file-text-o w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>操作日志</span>
            </a>
          </li>
        </ul>
      </nav>
      
      <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-light-2">
        <div class="bg-light-1 rounded-lg p-3">
          <div class="flex items-center justify-between mb-2">
            <span class="text-xs text-dark-2">客服满意度</span>
            <span class="text-xs font-medium">96%</span>
          </div>
          <div class="h-1.5 bg-light-2 rounded-full overflow-hidden">
            <div class="h-full bg-success rounded-full progress-bar" style="width: 96%"></div>
          </div>
          <button class="mt-2 w-full text-xs bg-success/10 text-success py-1.5 rounded hover:bg-success/20 transition-all duration-300">
            评价反馈
          </button>
        </div>
      </div>
    </aside>

    <!-- 主内容区 -->
    <div class="flex-1 md:ml-64 transition-all duration-300">
      <!-- 顶部导航栏 -->
      <header class="bg-white shadow-sm sticky top-0 z-20">
        <div class="flex items-center justify-between p-4">
          <div class="flex items-center">
            <button id="toggle-sidebar" class="mr-4 text-dark-2 hover:text-primary md:hidden">
              <i class="fa fa-bars text-xl"></i>
            </button>
            <div class="relative">
              <input type="text" placeholder="搜索常见问题..." class="pl-10 pr-4 py-2 rounded-lg bg-light-1 text-sm w-64 focus:outline-none focus:ring-2 focus:ring-primary/30">
              <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-dark-2"></i>
            </div>
          </div>
          
          <div class="flex items-center space-x-4">
            <div class="relative">
              <button id="notification-btn" class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-light-1 relative transition-all duration-300">
                <i class="fa fa-bell-o text-dark-2"></i>
                <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
              </button>
            </div>
            
            <button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-light-1 transition-all duration-300">
              <i class="fa fa-question text-dark-2"></i>
            </button>
            
            <div class="relative">
              <button id="user-menu-btn" class="flex items-center space-x-2">
                <div class="w-9 h-9 rounded-full overflow-hidden border-2 border-transparent hover:border-primary transition-all duration-300">
                  <img src="https://picsum.photos/id/1012/200/200" alt="管理员头像" class="w-full h-full object-cover">
                </div>
                <div class="hidden md:block text-left">
                  <p class="text-sm font-medium">张管理员</p>
                  <p class="text-xs text-dark-2">超级管理员</p>
                </div>
                <i class="fa fa-angle-down text-dark-2 hidden md:block"></i>
              </button>
            </div>
          </div>
        </div>
      </header>

      <!-- 页面内容 -->
      <main class="p-4 md:p-6">
        <!-- 页面标题和操作 -->
        <div class="mb-6 animate-fade-in flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">AI智能客服</h2>
            <p class="text-dark-2 mt-1">24小时智能客服，支持多语言自然语言交互</p>
          </div>
          
          <div class="flex space-x-3">
            <button class="bg-light-1 text-dark hover:bg-light-2 text-sm px-4 py-2 rounded-lg transition-all duration-300 flex items-center">
              <i class="fa fa-history mr-2"></i>
              <span>对话历史</span>
            </button>
            
            <button class="bg-primary text-white text-sm px-4 py-2 rounded-lg hover:bg-primary/90 transition-all duration-300 flex items-center">
              <i class="fa fa-headphones mr-2"></i>
              <span>转人工客服</span>
            </button>
          </div>
        </div>

        <!-- AI客服主界面 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
          <!-- 聊天区域 -->
          <div class="lg:col-span-2 bg-white rounded-xl shadow-card p-6 animate-slide-in">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold">智能客服对话</h3>
              <div class="flex items-center space-x-2">
                <span class="text-xs bg-success/10 text-success px-2 py-1 rounded-full">在线</span>
                <span class="text-xs text-dark-2">响应时间: 0.5s</span>
              </div>
            </div>
            
            <!-- 聊天记录 -->
            <div class="h-96 overflow-y-auto p-4 bg-light-1 rounded-lg mb-4">
              <div class="space-y-4">
                <!-- AI欢迎消息 -->
                <div class="chat-bubble ai">
                  <div class="flex items-start space-x-2">
                    <div class="w-8 h-8 bg-secondary rounded-full flex items-center justify-center">
                      <i class="fa fa-robot text-white text-sm"></i>
                    </div>
                    <div class="bg-white rounded-lg p-3 shadow-sm">
                      <p class="text-sm">您好！我是Cencat AI智能客服，很高兴为您服务。我可以帮助您解决系统使用、技术问题、套餐升级等各种问题。请告诉我您需要什么帮助？</p>
                      <p class="text-xs text-dark-2 mt-1">今天 14:30</p>
                    </div>
                  </div>
                </div>
                
                <!-- 用户问题 -->
                <div class="chat-bubble user">
                  <div class="flex items-start space-x-2 flex-row-reverse">
                    <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
                      <i class="fa fa-user text-white text-sm"></i>
                    </div>
                    <div class="bg-primary text-white rounded-lg p-3 shadow-sm">
                      <p class="text-sm">如何升级我的套餐？</p>
                      <p class="text-xs text-primary-200 mt-1">今天 14:31</p>
                    </div>
                  </div>
                </div>
                
                <!-- AI回复 -->
                <div class="chat-bubble ai">
                  <div class="flex items-start space-x-2">
                    <div class="w-8 h-8 bg-secondary rounded-full flex items-center justify-center">
                      <i class="fa fa-robot text-white text-sm"></i>
                    </div>
                    <div class="bg-white rounded-lg p-3 shadow-sm">
                      <p class="text-sm">升级套餐非常简单！请按照以下步骤操作：</p>
                      <ol class="text-sm mt-2 space-y-1">
                        <li>1. 进入"套餐管理"页面</li>
                        <li>2. 选择您想要升级的套餐版本</li>
                        <li>3. 确认升级费用和资源配额</li>
                        <li>4. 完成支付后系统会自动升级</li>
                      </ol>
                      <p class="text-sm mt-2">需要我帮您打开套餐管理页面吗？</p>
                      <p class="text-xs text-dark-2 mt-1">今天 14:31</p>
                    </div>
                  </div>
                </div>
                
                <!-- 用户确认 -->
                <div class="chat-bubble user">
                  <div class="flex items-start space-x-2 flex-row-reverse">
                    <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
                      <i class="fa fa-user text-white text-sm"></i>
                    </div>
                    <div class="bg-primary text-white rounded-lg p-3 shadow-sm">
                      <p class="text-sm">好的，请帮我打开套餐管理页面</p>
                      <p class="text-xs text-primary-200 mt-1">今天 14:32</p>
                    </div>
                  </div>
                </div>
                
                <!-- AI操作 -->
                <div class="chat-bubble ai">
                  <div class="flex items-start space-x-2">
                    <div class="w-8 h-8 bg-secondary rounded-full flex items-center justify-center">
                      <i class="fa fa-robot text-white text-sm"></i>
                    </div>
                    <div class="bg-white rounded-lg p-3 shadow-sm">
                      <p class="text-sm">好的，正在为您打开套餐管理页面...</p>
                      <div class="mt-2 p-2 bg-light-1 rounded border">
                        <p class="text-xs font-mono">已执行操作: 导航到 packages.html</p>
                      </div>
                      <p class="text-xs text-dark-2 mt-1">今天 14:32</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 输入区域 -->
            <div class="space-y-3">
              <div class="flex space-x-2">
                <input type="text" id="question-input" placeholder="输入您的问题..." class="flex-1 p-3 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30">
                <button id="send-question" class="bg-primary text-white w-12 h-12 rounded-lg flex items-center justify-center hover:bg-primary/90 transition-all duration-300">
                  <i class="fa fa-paper-plane"></i>
                </button>
              </div>
              
              <div class="flex space-x-2">
                <button class="text-xs bg-light-1 hover:bg-light-2 px-3 py-2 rounded transition-all duration-300 flex items-center">
                  <i class="fa fa-microphone mr-1"></i>
                  <span>语音输入</span>
                </button>
                <button class="text-xs bg-light-1 hover:bg-light-2 px-3 py-2 rounded transition-all duration-300 flex items-center">
                  <i class="fa fa-image mr-1"></i>
                  <span>图片识别</span>
                </button>
                <button class="text-xs bg-light-1 hover:bg-light-2 px-3 py-2 rounded transition-all duration-300 flex items-center">
                  <i class="fa fa-file-text-o mr-1"></i>
                  <span>文件上传</span>
                </button>
                <button class="text-xs bg-light-1 hover:bg-light-2 px-3 py-2 rounded transition-all duration-300 flex items-center">
                  <i class="fa fa-language mr-1"></i>
                  <span>翻译</span>
                </button>
              </div>
            </div>
          </div>

          <!-- 侧边功能 -->
          <div class="bg-white rounded-xl shadow-card p-6 animate-slide-in">
            <h3 class="text-lg font-semibold mb-4">快速帮助</h3>
            
            <div class="space-y-3 mb-6">
              <div class="p-3 bg-light-1 rounded-lg cursor-pointer hover:bg-light-2 transition-all duration-300" data-question="如何重置密码？">
                <p class="text-sm font-medium">如何重置密码？</p>
              </div>
              <div class="p-3 bg-light-1 rounded-lg cursor-pointer hover:bg-light-2 transition-all duration-300" data-question="文件上传失败怎么办？">
                <p class="text-sm font-medium">文件上传失败怎么办？</p>
              </div>
              <div class="p-3 bg-light-1 rounded-lg cursor-pointer hover:bg-light-2 transition-all duration-300" data-question="如何添加新用户？">
                <p class="text-sm font-medium">如何添加新用户？</p>
              </div>
              <div class="p-3 bg-light-1 rounded-lg cursor-pointer hover:bg-light-2 transition-all duration-300" data-question="套餐升级流程">
                <p class="text-sm font-medium">套餐升级流程</p>
              </div>
              <div class="p-3 bg-light-1 rounded-lg cursor-pointer hover:bg-light-2 transition-all duration-300" data-question="数据库连接超时如何解决？">
                <p class="text-sm font-medium">数据库连接超时如何解决？</p>
              </div>
              <div class="p-3 bg-light-1 rounded-lg cursor-pointer hover:bg-light-2 transition-all duration-300" data-question="如何配置多租户隔离？">
                <p class="text-sm font-medium">如何配置多租户隔离？</p>
              </div>
            </div>
            
            <div class="border-t border-light-2 pt-4">
              <h4 class="text-sm font-medium mb-3">多语言支持</h4>
              <div class="grid grid-cols-2 gap-2">
                <button class="text-xs bg-primary text-white py-2 rounded transition-all duration-300" data-lang="zh">中文</button>
                <button class="text-xs bg-light-1 hover:bg-light-2 py-2 rounded transition-all duration-300" data-lang="en">English</button>
                <button class="text-xs bg-light-1 hover:bg-light-2 py-2 rounded transition-all duration-300" data-lang="ja">日本語</button>
                <button class="text-xs bg-light-1 hover:bg-light-2 py-2 rounded transition-all duration-300" data-lang="ko">한국어</button>
              </div>
            </div>
            
            <div class="border-t border-light-2 pt-4 mt-4">
              <h4 class="text-sm font-medium mb-3">AI学习能力</h4>
              <div class="space-y-2">
                <div class="flex items-center justify-between">
                  <span class="text-xs text-dark-2">知识库更新频率</span>
                  <span class="text-xs font-medium">每月更新</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-xs text-dark-2">训练数据量</span>
                  <span class="text-xs font-medium">10,000+ 问答对</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-xs text-dark-2">准确率</span>
                  <span class="text-xs font-medium">95.8%</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 客服统计 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
          <div class="bg-white rounded-xl shadow-card p-5">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm text-dark-2">今日咨询量</p>
                <p class="text-2xl font-bold text-dark mt-1">42</p>
                <p class="text-xs text-success mt-1">较昨日 +8</p>
              </div>
              <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center">
                <i class="fa fa-comments text-primary text-xl"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-card p-5">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm text-dark-2">问题解决率</p>
                <p class="text-2xl font-bold text-dark mt-1">92%</p>
                <p class="text-xs text-success mt-1">高满意度</p>
              </div>
              <div class="w-12 h-12 bg-success/10 rounded-full flex items-center justify-center">
                <i class="fa fa-check-circle text-success text-xl"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-card p-5">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm text-dark-2">平均响应时间</p>
                <p class="text-2xl font-bold text-dark mt-1">0.8s</p>
                <p class="text-xs text-success mt-1">快速响应</p>
              </div>
              <div class="w-12 h-12 bg-info/10 rounded-full flex items-center justify-center">
                <i class="fa fa-bolt text-info text-xl"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-card p-5">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm text-dark-2">人工转接率</p>
                <p class="text-2xl font-bold text-dark mt-1">15%</p>
                <p class="text-xs text-warning mt-1">需要优化</p>
              </div>
              <div class="w-12 h-12 bg-warning/10 rounded-full flex items-center justify-center">
                <i class="fa fa-exchange text-warning text-xl"></i>
              </div>
            </div>
          </div>
        </div>

        <!-- 知识库 -->
        <div class="bg-white rounded-xl shadow-card p-6 animate-slide-in">
          <h3 class="text-lg font-semibold mb-4">知识库搜索</h3>
          
          <div class="flex space-x-2 mb-4">
            <input type="text" placeholder="搜索知识库..." class="flex-1 p-3 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30">
            <button class="bg-primary text-white px-4 py-3 rounded-lg hover:bg-primary/90 transition-all duration-300">
              <i class="fa fa-search mr-2"></i>
              <span>搜索</span>
            </button>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="p-4 border border-light-2 rounded-lg hover:border-primary transition-all duration-300 cursor-pointer">
              <div class="flex items-center mb-2">
                <i class="fa fa-file-text-o text-primary mr-2"></i>
                <span class="font-medium">系统使用指南</span>
              </div>
              <p class="text-sm text-dark-2">包含系统所有功能的使用说明和最佳实践</p>
            </div>
            
            <div class="p-4 border border-light-2 rounded-lg hover:border-primary transition-all duration-300 cursor-pointer">
              <div class="flex items-center mb-2">
                <i class="fa fa-wrench text-success mr-2"></i>
                <span class="font-medium">故障排除手册</span>
              </div>
              <p class="text-sm text-dark-2">常见问题解决方案和故障排除步骤</p>
            </div>
            
            <div class="p-4 border border-light-2 rounded-lg hover:border-primary transition-all duration-300 cursor-pointer">
              <div class="flex items-center mb-2">
                <i class="fa fa-graduation-cap text-warning mr-2"></i>
                <span class="font-medium">培训教程</span>
              </div>
              <p class="text-sm text-dark-2">新用户培训材料和视频教程</p>
            </div>
            
            <div class="p-4 border border-light-2 rounded-lg hover:border-primary transition-all duration-300 cursor-pointer">
              <div class="flex items-center mb-2">
                <i class="fa fa-shield text-danger mr-2"></i>
                <span class="font-medium">安全指南</span>
              </div>
              <p class="text-sm text-dark-2">系统安全配置和最佳安全实践</p>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 侧边栏切换
      const sidebar = document.getElementById('sidebar');
      const toggleSidebar = document.getElementById('toggle-sidebar');
      const closeSidebar = document.getElementById('close-sidebar');
      
      toggleSidebar.addEventListener('click', function() {
        sidebar.classList.toggle('-translate-x-full');
      });
      
      closeSidebar.addEventListener('click', function() {
        sidebar.classList.add('-translate-x-full');
      });
      
      // 快速帮助点击事件
      const quickHelpItems = document.querySelectorAll('.bg-light-1.rounded-lg.cursor-pointer');
      quickHelpItems.forEach(item => {
        item.addEventListener('click', function() {
          const question = this.getAttribute('data-question') || this.querySelector('.font-medium').textContent;
          const input = document.getElementById('question-input');
          input.value = question;
          input.focus();
        });
      });
      
      // 多语言切换
      const langButtons = document.querySelectorAll('[data-lang]');
      langButtons.forEach(button => {
        button.addEventListener('click', function() {
          const lang = this.getAttribute('data-lang');
          langButtons.forEach(btn => {
            btn.classList.remove('bg-primary', 'text-white');
            btn.classList.add('bg-light-1', 'hover:bg-light-2');
          });
          this.classList.remove('bg-light-1', 'hover:bg-light-2');
          this.classList.add('bg-primary', 'text-white');
          
          // 更新界面语言提示
          const input = document.getElementById('question-input');
          const placeholders = {
            'zh': '输入您的问题...',
            'en': 'Enter your question...',
            'ja': '質問を入力してください...',
            'ko': '질문을 입력하세요...'
          };
          input.placeholder = placeholders[lang] || '输入您的问题...';
        });
      });
      
      // 发送问题功能
      const sendButton = document.getElementById('send-question');
      const questionInput = document.getElementById('question-input');
      
      sendButton.addEventListener('click', function() {
        const question = questionInput.value.trim();
        if (question) {
          // 模拟AI回复
          addUserMessage(question);
          questionInput.value = '';
          
          // 模拟AI思考过程
          setTimeout(() => {
            addAIMessage(getAIResponse(question));
          }, 1000);
        }
      });
      
      questionInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
          sendButton.click();
        }
      });
      
      // 添加用户消息
      function addUserMessage(message) {
        const chatContainer = document.querySelector('.h-96.overflow-y-auto');
        const messageDiv = document.createElement('div');
        messageDiv.className = 'chat-bubble user';
        messageDiv.innerHTML = `
          <div class="flex items-start space-x-2 flex-row-reverse">
            <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
              <i class="fa fa-user text-white text-sm"></i>
            </div>
            <div class="bg-primary text-white rounded-lg p-3 shadow-sm">
              <p class="text-sm">${message}</p>
              <p class="text-xs text-primary-200 mt-1">${new Date().toLocaleTimeString()}</p>
            </div>
          </div>
        `;
        chatContainer.appendChild(messageDiv);
        chatContainer.scrollTop = chatContainer.scrollHeight;
      }
      
      // 添加AI消息
      function addAIMessage(message) {
        const chatContainer = document.querySelector('.h-96.overflow-y-auto');
        const messageDiv = document.createElement('div');
        messageDiv.className = 'chat-bubble ai';
        messageDiv.innerHTML = `
          <div class="flex items-start space-x-2">
            <div class="w-8 h-8 bg-secondary rounded-full flex items-center justify-center">
              <i class="fa fa-robot text-white text-sm"></i>
            </div>
            <div class="bg-white rounded-lg p-3 shadow-sm">
              <p class="text-sm">${message}</p>
              <p class="text-xs text-dark-2 mt-1">${new Date().toLocaleTimeString()}</p>
            </div>
          </div>
        `;
        chatContainer.appendChild(messageDiv);
        chatContainer.scrollTop = chatContainer.scrollHeight;
      }
      
      // 模拟AI回复
      function getAIResponse(question) {
        const responses = {
          '如何重置密码': '重置密码的步骤：1. 进入个人设置页面 2. 点击"安全设置" 3. 选择"修改密码" 4. 按照提示完成密码重置。',
          '文件上传失败': '文件上传失败可能的原因：文件大小超过限制、网络连接问题、文件格式不支持。建议检查文件大小和格式，或联系技术支持。',
          '如何添加新用户': '添加新用户步骤：1. 进入用户管理页面 2. 点击"添加用户" 3. 填写用户信息 4. 设置权限 5. 保存完成。',
          '套餐升级流程': '套餐升级：1. 进入套餐管理 2. 选择目标套餐 3. 确认费用 4. 完成支付 5. 系统自动升级。',
          '数据库连接超时': '数据库连接超时解决方案：检查网络连接、数据库服务状态、连接池配置，或联系数据库管理员。',
          '多租户隔离': '多租户隔离配置：支持共享库、独立库、独立集群三种模式，可在系统设置中进行配置。'
        };
        
        for (const [key, response] of Object.entries(responses)) {
          if (question.includes(key)) {
            return response;
          }
        }
        
        return '感谢您的提问！我会尽快为您提供详细的解答。如果您需要更具体的帮助，请提供更多详细信息。';
      }
    });
  </script>
</body>
</html>